<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'listSysRole.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	<link rel="shortcut icon" href="${ctx }/ico/favicon.ico"> 
	<link href="${ctx }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx }/css/font-awesome.css?v=4.4.0" rel="stylesheet">
     <link href="${ctx }/css/common.css" rel="stylesheet">
    <!-- jqgrid-->
    <link href="${ctx }/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
	<link href="${ctx }/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="${ctx }/css/animate.css" rel="stylesheet">
    <link href="${ctx }/css/style.css?v=4.1.0" rel="stylesheet">
     <!--bootstrap-select-->
	<link href="${ctx}/css/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet"/>
  </head>
  
  <body class="gray-bg">
	<div class="animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox ">
                    <div class="ibox-content">
                    	<div class="row m-b-sm m-t-sm">
	                    	<div class="col-md-11">
	                    		<div class="input-group">
		                    		<button class="btn btn-success btn-outline commonbtn" type="button" id="addSysRole" fromUrl='/security/role/addRole'><i class="fa fa-plus"></i> 添加</button>                    		
		                    		<button class="btn btn-success btn-outline commonbtn" type="button" id="editSysRole" fromUrl='/security/role/editRole'><i class="fa fa-pencil"></i> 编辑</button>
		                    		<button class="btn btn-success btn-outline commonbtn" type="button" id="delSysRole"  fromUrl='/security/role/delRole'><i class="fa fa-trash"></i> 删除</button>
		                    		<button class="btn btn-success btn-outline commonbtn" type="button" id="editSysRoleResc"  fromUrl='/security/resources/addRoleRes'><i class="fa fa-pencil"></i> 分配权限</button>
		                            <input type="text" placeholder="请输入角色名称" class="input-sm form-control" style="float: right;height: 100%;width: 50%" id="search"> 
		                            <span class="input-group-btn"><button type="button" class="btn btn-sm btn-primary commonsearch"  id="searchBtn"> 搜索</button> </span>
	                            </div>
	                        </div>
                    	</div>
                    	
                    	<div class="jqGrid_wrapper" class="sk-spinner sk-spinner-fading-circle">
                            <table id="table_list"></table>
                            <div id="pager_list"></div>
                        </div>
                    </div>
                 </div>
             </div>
         </div>
	</div>
	
	
	<!-- 添加角色模态窗口 -->
  	<div class="modal inmodal" id="addSysRoleWin" tabindex="-1" role="dialog" aria-hidden="true">
    	<div class="modal-dialog">
        	<div class="modal-content animated bounceInRight">
            	<div class="modal-header">
                	<button type="button" class="close closeWin" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>                 	
                 	<h5 class="modal-title">添加角色</h5>
                </div>
                
                <div class="ibox-content">
                	<form class="form-horizontal m-t" id="addSysRoleForm" >
                    	<div class="form-group">
                        	<label class="col-sm-3 control-label">角色名称：</label>
                            <div class="col-sm-8">
                            	<input id="name" name="name" class="form-control" required=""  aria-required="true"  type="text" placeholder="请输角色名称">                                    
                            </div>
                        </div>
                        
                        <div class="form-group">
                        	<label class="col-sm-3 control-label">角色标识：</label>
                            <div class="col-sm-8">
                            	<input id="roleKey" name="roleKey" class="form-control" required="" aria-required="true" type="text" placeholder="请输角色标示">                                    
                            </div>
                        </div>
                        
                        <div class="form-group">
                        	<label class="col-sm-3 control-label">角色描述：</label>
                            <div class="col-sm-8">
                            	<input id="description" name="description" class="form-control" required="" aria-required="true" type="text" placeholder="请输角色描述">                                    
                            </div>
                        </div>
						<div class="form-group">
							<label class="col-sm-3 control-label">角色等级：</label>
								<div class="col-sm-8">
									<select class="selectpicker" required="" aria-required="true" name="role_level" id="role_level">
									   <option value="0">系统管理员</option>
									   <option value="1">省级管理员</option>
									   <option value="2">省级操作员</option>
									   <option value="3">市州管理员</option>
									   <option value="4">市州操作员</option>
									</select>
							 	</div>
						</div>
						<div class="form-group">
							<div class="col-sm-8 col-sm-offset-3">                                   
                                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                					<button type="submit" class="btn btn-primary" id="addRoles">保存</button>
                            </div>
                   		</div>
                	</form>
                	 
               	</div>
            	
        	</div>
        </div>
  	</div>
  	<!--end 添加角色模态窗口 -->
  	
  	<!-- 修改角色模态窗口 -->
  	<div class="modal inmodal" id="editSysRoleWin"  tabindex="-1" role="dialog" aria-hidden="true" style="padding-bottom:30px">
       <iframe id="editSysRoleFrame" width="100%" height="100%" frameborder="0" ></iframe>
  	</div>
	<!--end 修改角色模态窗口 -->
	
	<!-- 分配权限模态窗口 -->
  	<div class="modal inmodal" id="editSysRoleRescWin" tabindex="-1" role="dialog" aria-hidden="true" style="padding-bottom:50px">
    	<div class="modal-dialog">
        	<div class="modal-content animated bounceInRight">
            	<div class="modal-header">
                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>                 	
                 	<h5 class="modal-title">分配权限</h5>
                </div>
                
                <div class="ibox-content" >
                	 <div id="using_json"></div>
               	</div>
            	  <div class="modal-footer">
                 	<div class="col-sm-8 col-sm-offset-3">                                   
                    	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                		<button type="button" class="btn btn-primary" id="saveRoleRes">保存</button>
                    </div>
               	 </div>
        	</div>
        </div>
  	</div>
  	<!--end 分配权限模态窗口 -->
	
	
	<!-- 全局js -->
    <script src="${ctx }/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx }/js/bootstrap.min.js?v=3.3.6"></script>

    <!-- Peity -->
    <script src="${ctx }/js/plugins/peity/jquery.peity.min.js"></script>

    <!-- jqGrid -->
    <script src="${ctx }/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
    <script src="${ctx }/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
    
    <!-- jQuery Validation plugin javascript-->
    <script src="${ctx }/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${ctx }/js/plugins/validate/messages_zh.min.js"></script>
  
	<!-- layer javascript -->
	<script src="${ctx }/js/plugins/layer/layer.min.js"></script>
	
	<!-- jQuery form-->
	<script src="${ctx }/js/jquery.form.js"></script>
	
	
    <!-- 自定义js -->
    <script src="${ctx }/js/content.js?v=1.0.0"></script>
    
    <!-- jsTree plugin javascript -->
    <script src="${ctx }/js/plugins/jsTree/jstree.min.js"></script>
     <!--bootstrap-select-->
	<script src="${ctx}/js/plugins/bootstrap-select/bootstrap-select.min.js"></script>
    <script>
		$(document).ready(function () {
			$.jgrid.defaults.styleUI = 'Bootstrap';
	        var searchString='';
			//绑定表格数据
			$("#table_list").jqGrid({
	        	postData:{name: searchString},
		    	url:"${ctx }/security/role/loadDataGrid",		        	
		     	datatype: "json",
		     	height: "calc(100% - 265px)",
		      	autowidth: true,
		     	shrinkToFit: true,
		     	multiselect: true,
		     	multiboxonly:true,  
		      	rowList: [10, 20, 30],
		      	root:"rows",
			    colNames: ['序号', '角色名','角色标识', '描述','角色等级','权限'],
		      	colModel: [
		      	{
		       		name: 'id',
		        	index: 'id',
		       		width: '10%',
		       		sorttype: "int"
		        },
		     	{
					name: 'name',
		            index: 'name',		            
		            width: '20%',
		      	},
		        {
		           	name: 'roleKey',		           	
		            index: 'roleKey',
		           	width: '20%',
		        },
		       	{
		         	name: 'description',
		            index: 'description',
		            width: '20%',		           
		        },
		         	{
		         	name: 'role_level',
		            index: 'role_level',
		            width: '20%',
		             formatter: "select", editoptions:{value:"0:系统管理员;1:省级管理员;2:省级操作员;3:市州管理员;4:市州操作员;"}		           
		        },
		        
		       	{
		         	name: 'resourcesName',
		            index: 'resourcesName',
		            width: '20%'
		        }],
		        sortable:true,
		        sortname: 'id',
		        sortorder: 'asc',
		        pager: "#pager_list",
		        caption: "角色列表",
		        viewrecords: true,
            });
            });
            // jqGrid 自动调整宽度
			$(window).bind('resize', function () {
        		var width = $('.jqGrid_wrapper').width();
       			$('#table_list').setGridWidth(width);       		
     		});
     		
     		//绑定查询事件
	        $("#searchBtn").click(function(){	        	
	        	var searchString = $("#search").val(); 
		        $("#table_list").jqGrid('setGridParam',{ 
		            url:"${ctx }/security/role/loadDataGrid", 
		            postData:{'name':searchString}, //发送数据 
		            page:1
		        }).trigger("reloadGrid"); //重新载入 
	    	});
     		
        	
        	$('#using_json').data('jstree', false);
        	
        	$.getJSON('${ctx }/security/resources/loadDataJsTree', function (data) {
			    $('#using_json').jstree({
			        'plugins' : [ "checkbox" ], //出现选择框
                	'checkbox': { cascade: "", three_state: false }, //不级联
                	'core': {
                    	'data': data,
                    	"themes": {
                       		"responsive": false
                    	}
                	}
			    }).bind('loaded.jstree');
			});
			
        	
        	//角色分配权限
        	$('#editSysRoleResc').click(function(){
				$("#using_json").jstree("uncheck_all");
        		var selectedId = $("#table_list").jqGrid("getGridParam", "selrow");
        		if(selectedId==null||selectedId=="")
				{
					layer.alert('请选择一项！',{icon: 0});					
					return false;
				}//获取信息id
				
				$.ajax({
			    	type: "post",
			    	url: "${ctx }/security/resources/findResourcesByRole",
			     	data: "roleId="+selectedId,
			     	success: function(data) {
			     		var returnData = eval(data);			     		
			     		$.each(returnData, function (i, item) {			     			
                			$('#using_json').jstree('check_node', item.id);//将节点选中 
                		});
			     	}
		    	});
        		
        		$('#editSysRoleRescWin').modal('show');
        	});
        	
        	//保存权限
        	$('#saveRoleRes').click(function(){
        		var selectedId = $("#table_list").jqGrid("getGridParam", "selrow");
        		var checkedNodes =$("#using_json").jstree("get_checked");
        		
        		var fromUrl=$('#editSysRoleResc').attr('fromUrl');
				fromUrl="${ctx }"+fromUrl;
        		
        		$.ajax({
			    	type: "post",
			    	url: "${ctx }/security/resources/addRoleRes",
			     	data: "roleId="+selectedId+"&resourceIds="+checkedNodes,
			     	success: function(data) {
			     		if(data.errcode=="0")
			      		{
			      			layer.alert(data.errmsg,{icon: 1}, function(index){		      			
			      				//刷新表格数据
								$("#table_list").trigger("reloadGrid");
								
								//关闭add窗口
								$('#editSysRoleRescWin').modal('hide');
								//关闭提示框
								layer.close(index);
							});		      			
			      		}else
			      		{
			      			layer.alert(data.errmsg,{icon: 2});
			      		}
			     	}
		    	});
        	});
        	
        	//绑定添加按钮事件
        	$('#addSysRole').click(function(){
        		$('#addSysRoleWin').modal('show');
        	});
        	
        	//绑定add表单提交事件,异步提交表单
	        $('#addSysRoleForm').submit(function(){
	        	//根据button属性获取提交地址
	        	var fromUrl=$('#addSysRole').attr('fromUrl');
				fromUrl="${ctx }"+fromUrl;
	        	
	        	$.ajax({
			    	type: "post",
			    	url: fromUrl,
			     	data: $('#addSysRoleForm').serialize(),
			     	success: function(data) {
			      		if(data.errcode=="0")
			      		{		      			
			      			layer.alert(data.errmsg,{icon: 1}, function(index){		      			
			      				//刷新表格数据
								$("#table_list").trigger("reloadGrid");	
								//清空表单数据
								$("#addSysRoleForm :input").not(":button, :submit, :reset, :hidden").val("").removeAttr("checked").remove("selected");
								//关闭add窗口
								$('#addSysRoleWin').modal('hide');
								//关闭提示框
								layer.close(index);
							});		      			
			      		}else
			      		{
			      			layer.alert(data.errmsg,{icon: 2});
			      		}
			      	},
			      	error: function() {		      		
			      		layer.alert('添加角色失败！',{icon: 2});
	        		}
	        	});
	        	return false;
	        });
	        
	        //绑定修改按钮事件
        	$('#editSysRole').click(function(){
        		var selectedId = $("#table_list").jqGrid("getGridParam", "selrow");
	        	if(selectedId==null||selectedId=="")
				{
					layer.alert('请选择一项！',{icon: 0});
					return;
				}
        		//根据button属性获取提交地址
	        	var fromUrl=$('#editSysRole').attr('fromUrl');
				fromUrl="${ctx }"+fromUrl+"?roleId="+selectedId;
        		$("#editSysRoleFrame").attr("src", fromUrl);
        		$('#editSysRoleWin').modal('show');
        	});
	        
	        //绑定删除事件
	        $('#delSysRole').click(function(){        	
				var selectedIds = $("#table_list").jqGrid("getGridParam", "selarrrow");
				if(selectedIds=="")
				{
					layer.alert('请选择一项！',{icon: 0});
					return;
				}
				
				//根据button属性获取提交地址
	        	var fromUrl=$('#delSysRole').attr('fromUrl');
				fromUrl="${ctx }"+fromUrl;
				
				$.ajax({
			    	type: "post",
			    	url: fromUrl,
			     	data: "ids="+selectedIds,
			     	success: function(data) {		     		
			     		if(data.errcode=="0")
			      		{		      			
			      			layer.alert(data.errmsg,{icon: 1}, function(index){		      			
			      				//刷新表格数据
								$("#table_list").trigger("reloadGrid");
	
								//关闭提示框
								layer.close(index);
							});		      			
			      		}else
			      		{
			      			layer.alert(data.errmsg,{icon: 2});
			      		}
			     	},
			     	error: function() {
			      		layer.alert('删除角色失败！',{icon: 2});
	        		}
			    });
	        });

        	
      
		
		function editWinClose(flag)
		{
			if(flag=="0")
        	{
        		$("#table_list").trigger("reloadGrid");
        	}
        	$("#editSysRoleFrame")[0].contentWindow.document.write('');
			$("#editSysRoleFrame")[0].contentWindow.close();
			//关闭edit窗口
			$('#editSysRoleWin').modal('hide');
		}
    </script>
  </body>
</html>
